<template>
	<view class="center-view full-width">
		<text class="title-text">预报名用户，添加免审核的用户。</text>
		<view style="width:100%">
			<input placeholder="用户名" class="theme-input" v-model="searchName"/>
			<image @click="getUser" style="height:70upx;width:20%;margin-top:25upx;" src="../../static/add.svg"></image>
		</view>
		<view class="user-item dashboard" v-for="user in users" :key="user.username" @click="userInfoPage(user.username)">
			<text class="item-title">{{user.username}}</text>
			<text class="item-name">真实姓名：{{user.name}}</text>
			<text class="item-time">加入时间：{{formatDatetime(new Date(user.joinTime))}}</text>
			<text class="item-ident">身份：{{user.identify==1?'管理员':(user.joinMet==0?'临时用户':'正式用户')}}</text>
			<!-- formatDatetime(new Date(user.joinTime)) -->
			 <!-- |  | {{user.intro}} |  -->
			<!-- <button>删</button> -->
			<image class="item-button" @click.stop="deleteUser(user.username)" src="../../static/delete.svg"></image>
		</view>

		<button @click="lastStep"  class="long-red-button">上一步</button>
		<button @click="submit" type="primary" class="long-button green" >提交</button>
	</view>
</template>


<script>
	import formatDatetime from "../../common/zdateutil.js"
	export default {
		data: function () {
			return {
				users : [],
				searchName : "",
				enrollData : {},
				formatDatetime : null
				// timeLimit : ""
			}
		},
		onLoad : function(){
			this.formatDatetime = formatDatetime.formatDatetime;
			var data;
			var vm = this;
			// 载入题目
			uni.getStorage({
				key : 'newEnrollDraft',
				success :function(res){
					data = res.data;
					vm.enrollData = data;
					vm.users = vm.enrollData.users == null ? [] : vm.enrollData.users;
				},
				fail : function(){
					uni.navigateTo({
						url : 'newEnrollDesc'
					})
				}
			});
			
			// console.log(this.enrollData)
			// console.log(this.enrollData.checked)
			// this.users.push({'username':'test','name':'test','intro':'this is a suck introduction.','status':'success'})
		},
		onBackPress(options) { 
			uni.navigateTo({
				url : '../user/main'
			}) 
            return true;  
        },  
		methods: {
			lastStep : function(){
				this.enrollData['users'] = this.users;
				uni.setStorage({
					key : 'newEnrollDraft',
					data : this.enrollData
				});
				uni.navigateTo({
					url : 'newEnrollRes'
				})
			},
			submit : function(){

				// console.log(this.enrollData)
				var param = {
					'title' : this.enrollData.title,
					'content' : JSON.stringify(this.enrollData.content),
					'checked' : this.enrollData.checked,
					'enrollLimit' : this.enrollData.enrollLimit,
					'endMethod' : this.enrollData.endMethod,
					'numLimit' : this.enrollData.numLimit,
					'planEndTimeLong' : this.enrollData.planEndTime,
					'statusTip' : JSON.stringify(this.enrollData.statusTip)
				};
				// console.log(param);
				// var vmusers = this.users;
				// var cont = false;
				var vm = this;
				uni.showModal({
					title : '新建项目',
					content : '您确定要新建该报名吗？',
					success : function(res){
						if(res.confirm){
							// 提交报名数据
							vm.$post(vm.enrollurl + '/enroll/newEnroll',param,function(res){
								var data = res.data;
								if(data.code != 0){
									uni.showModal({
										title : '错误',
										content : data.message,
										showCancel : false
									})
									return;
								}
								var id = data.object['id'];
								var users = [];
								if(param.checked){
									for(var i=0;i<vm.users.length;i++){
										users.push(vm.users[i].username);
									}
								} 
								uni.removeStorage({
									key : 'newEnrollDraft'
								})
								if(users.length != 0){
									// 提交预报名用户名列表
									var param1 = {'usernamesStr':JSON.stringify(users),'eId':id};
									// console.log(param1)
									vm.$post(vm.enrollurl + '/enroll/preEnrollUsers',param1,function(res){
										var data = res.data;
										if(data.code != 0){
											uni.showModal({
												title : '错误',
												content : data.message,
												showCancel : false
											})
											return;
										}
										uni.navigateTo({
											url : '../user/main'
										})
									});
								}else{
									uni.navigateTo({
										url : '../user/main'
									})
								}
							});
						}
					}
				})
			},
			getUser : function(){
				// 请求服务器验证用户名对应的用户是否存在，然后增加到用户列表中去
				if(this.searchName == ""){
					return;
				}
				var param = {'username':this.searchName};
				var users = this.users;
				// 检查是否已经添加过该用户
				for(var i=0;i<users.length;i++){
					if(users[i].username == this.searchName){
						// console.log("???")
						return;
					}
				}
				// console.log(param);
				this.$get(this.userurl + '/user/getOther',param,function(res){
					// console.log(res)
					var data = res.data;
					if(data.code != 0){
						uni.showModal({
							title : '错误',
							content : data.message,
							showCancel : false
						})
						return;
					}
					// if(this.$ref)
					// var user = {'username':data.object.username,'name':data.object.name,'joinTime':data.object.joinTime,'identify':data.object.identify,'joinMet'};
					users.push(data.object);
				});
				
			},
			userInfoPage : function(username){
				uni.navigateTo({
					url : '../user/info?userId=' + username
				})
			},
			deleteUser : function(username){	
				var vm = this;
				uni.showModal({
					title : '删除预报名',
					content : '您确定删除用户名为' + username + '的预报名吗？',
					success : function(res){
						if(res.confirm){
							for(var i=0;i<vm.users.length;i++){
								if(vm.users[i].username == username){
									vm.users.splice(i,1);
								}
							}
						}
					}
				})
			}
		}
	}
</script>

<style>
	@import "../../common/zcss.css";
	.title-text{
		font-size:40upx;
		color:gray;
	}
	input{
		margin-top:25upx;
		margin-bottom: 25upx;
		margin-left: 30upx;
		/* background-color: rgba(231, 226, 226, 0.568); */
		
		height:40upx;
		width: 650upx;
		padding: 20upx;
		padding-left: 30upx;
	}
	.user-item{
		border: 1upx solid gray;
		height: 150upx;
		position: relative;
		width: 99%;
		
		/* margin-bottom: 10upx; */
	}
	.item-button{
		position: absolute;
		font-size:35upx; 
		height:80upx;
		width: 100upx;
		margin-top: 5upx;
		right: 0%;
		
		color:black;
	}
	.item-name{
		position: absolute;
		font-size: 40upx;
		color: gray;
		left: 1%;
		bottom: 0%;
	}
	.item-time{
		position: absolute;
		font-size: 20upx;
		right: 1%;
		color: gray;
		bottom: 30upx;
	}
	.item-ident{
		position: absolute;
		font-size: 20upx;
		right: 1%;
		color: gray;
		bottom: 2upx;
	}
	.item-title{
		font-size: 60upx;
		position: absolute;
		left: 1%;
	}
</style>
